<template>
	<view class="bg">
		 <view class="uni-padding-wrap uni-common-mt">
        <view class="uni-flex uni-row" style="flex-wrap: wrap;">

				<view v-for="item in workList" :key="item.title" class="flex-item">
					<button
					class="btn"
						@click="toPages(item)" 
						:open-type="item.methodsName == 6 ? 'contact' : ''"	
						>
					<u-icon :name="item.icon" color="#2979ff" size="58" :label="item.title" labelPos="bottom"></u-icon>
				  </button>
				</view>
						
        </view>
      </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				workList: [
					{icon:'question', title:'打卡记录', url:'record/index', methodsName: 1},
					{icon:'file-text',title:'健康码',url:'', methodsName: 2},
					{icon:'clock',title:'行程卡',url:'', methodsName: 3},
					{icon:'map',title:'疫情风险区',url:'', methodsName: 4},
					{icon:'bell',title:'打卡提醒',url:'remind/index', methodsName: 5},
					{icon:'phone',title:'联系客服',url:'service/index', methodsName: 6}
					],
			}
		},
		methods: {
			toPages(list){
				if((list.methodsName == 1) || (list.methodsName == 5)){
					uni.navigateTo({
					  url: list.url,
					  success: res =>{console.log(res)},
					  fail:err => {
              console.log(err)
            }
				  })
				} else if(list.methodsName == 2){
						uni.navigateToMiniProgram({
							appId: 'wx2eec5fb00157a603',
							path: 'fangkongfuwu/pages/healthCode/step_1/index',
							extraData: {
								'data1': 'test'
							},
							success(res) {
								// 打开成功
							}
					  })
				} else if(list.methodsName == 3){
					uni.navigateToMiniProgram({
						appId: 'wx8f446acf8c4a85f5',
						path: 'pages/index',
						extraData: {
							'data1': 'test'
						},
						success(res) {
							// 打开成功
						}
          })
				} else if(list.methodsName == 4){
					uni.navigateToMiniProgram({
						appId: 'wxbebb3cdd9b331046',
						path: 'publicService/pages/riskGrade/riskGrade',
						extraData: {
							'data1': 'test'
						},
						success(res) {
							// 打开成功
						}
          })
				}
			}
		}
	}
</script>

<style scoped>
.btn{
	background-color: #fff;
	border: 0px;
	height: 200rpx;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bg {
	margin: 0;
	padding: 0;
}
.flex-item {
	width: 33%;
	height: 200rpx;

	line-height: 200rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.uni-padding-wrap{
	width: 100%;
	padding: 0px;
	margin: 0px;
}
.img {
	width: 5%;
}
</style>